<template>
  <div class="card">
    <p class="mb-10">
      <a href="https://github.com/tobiasahlin/SpinKit" target="_blank">
        使用 CSS 动画的加载指示器集合
      </a>
    </p>
    <el-button-group>
      <el-button @click="onLoading('loading1', 3000)">spinner</el-button>
      <el-button @click="onLoading('loading2', 3000)">sk-chase</el-button>
      <el-button @click="onLoading('loading3', 3000)">spinner2</el-button>
      <el-button @click="onLoading('loading4', 3000)">spinner3</el-button>
      <el-button @click="onLoading('loading5', 3000)">spinner4</el-button>
      <el-button @click="onLoading('loading6', 3000)">spinner5</el-button>
      <el-button @click="onLoading('loading7', 3000)">spinner6</el-button>
      <el-button @click="onLoading('loading8', 3000)">spinner7</el-button>
      <el-button @click="onLoading('loading9', 3000)">sk-circle</el-button>
      <el-button @click="onLoading('loading10', 3000)">sk-cube-grid</el-button>
      <el-button @click="onLoading('loading11', 3000)">sk-fading-circle</el-button>
      <el-button @click="onLoading('loading12', 3000)">sk-folding-cube</el-button>
    </el-button-group>
    <SpinnerOne :loading="loading.loading1" />
    <SkChase :loading="loading.loading2" />
    <SpinnerTwo :loading="loading.loading3" />
    <SpinnerThree :loading="loading.loading4" />
    <SpinnerFour :loading="loading.loading5" />
    <SpinnerFive :loading="loading.loading6" />
    <SpinnerSix :loading="loading.loading7" />
    <SpinnerSeven :loading="loading.loading8" />
    <SkCircle :loading="loading.loading9" />
    <SkCubeGrid :loading="loading.loading10" />
    <SkFadingCircle :loading="loading.loading11" />
    <SkFoldingCube :loading="loading.loading12" />
  </div>
</template>

<script setup>
import SpinnerOne from './loading/SpinnerOne.vue'
import SpinnerTwo from './loading/SpinnerTwo.vue'
import SpinnerThree from './loading/SpinnerThree.vue'
import SpinnerFour from './loading/SpinnerFour.vue'
import SpinnerFive from './loading/SpinnerFive.vue'
import SpinnerSix from './loading/SpinnerSix.vue'
import SpinnerSeven from './loading/SpinnerSeven.vue'
import SkChase from './loading/SkChase.vue'
import SkCircle from './loading/SkCircle.vue'
import SkCubeGrid from './loading/SkCubeGrid.vue'
import SkFadingCircle from './loading/SkFadingCircle.vue'
import SkFoldingCube from './loading/SkFoldingCube.vue'

const loading = reactive({
  loading1: false,
  loading2: false,
  loading3: false,
  loading4: false,
  loading5: false,
  loading6: false,
  loading7: false,
  loading8: false,
  loading9: false,
  loading10: false,
  loading11: false,
  loading12: false
})

const onLoading = (key, time) => {
  loading[key] = !loading[key]
  setTimeout(() => (loading[key] = !loading[key]), time)
}
</script>

<style lang="scss" scoped></style>
